<template>
  <el-dialog title="打印模板" width="230mm" :visible.sync="printView" append-to-body>
    <div class="btn_print">
      <el-button plain size="mini" @click="handlePrint()">打印</el-button>
    </div>
    <div id="print_page" class="print_page">
      <div class="print_title1">{{ formType }}</div>
      <table border="1" class="print_table" cellspacing="0">
        <tr>
          <td colspan="2" align="center">应聘岗位</td>
          <td colspan="2" class="tleft">{{ form.position }}</td>
          <td colspan="2" align="center"></td>
          <td colspan="2" class="tleft"></td>
        </tr>
        <tr>
          <td colspan="2" align="center">获此岗位信息渠道</td>
          <td colspan="2" class="tleft">{{ form.channel }}</td>
          <td colspan="2" align="center">推荐人姓名</td>
          <td colspan="2" class="tleft">{{ form.referee }}</td>
        </tr>
        <tr>
          <td align="left" colspan="8" class="back1" style="height: 10mm;">一、个人基本信息</td>
        </tr>
        <tr>
          <td colspan="1" align="center" class="w12">姓名</td>
          <td colspan="1" class="tleft w12">{{ form.name }}</td>
          <td colspan="1" align="center" class="w12">性别</td>
          <td colspan="1" class="tleft w12">{{ form.sex }}</td>
          <td colspan="1" align="center" class="w12">出生年月</td>
          <td colspan="1" class="tleft w12">{{ form.birthDate}}</td>
          <td colspan="1" align="center" class="w12">民族</td>
          <td colspan="1" class="tleft w12">{{ form.nation }}</td>
        </tr>
        <tr>
          <td colspan="1" align="center">籍贯</td>
          <td colspan="1" class="tleft">{{ form.nativePlace.split("->").join("") }}</td>
          <td colspan="1" align="center">家庭所在地</td>
          <td colspan="1" class="tleft">{{ form.homeLocation }}</td>
          <td colspan="1" align="center">身份证号</td>
          <td colspan="3" class="tleft">{{ form.idNumber }}</td>
        </tr>
        <tr>
          <td colspan="1" align="center">婚育状况</td>
          <td colspan="1" class="tleft">{{ form.maritalStatus }}</td>
          <td colspan="1" align="center">政治面貌</td>
          <td colspan="1" class="tleft">{{ form.politicalOutlook }}</td>
          <td colspan="1" align="center">技术职称</td>
          <td colspan="3" class="tleft">{{ form.technicalTitle }}</td>
        </tr>
        <tr>
          <td colspan="2" align="center">手机号码</td>
          <td colspan="2" class="tleft">{{ form.phone }}</td>
          <td colspan="2" align="center">E-mail</td>
          <td colspan="2" class="tleft">{{ form.email }}</td>
        </tr>
        <tr>
          <td colspan="2" align="center">身份证地址（详细）</td>
          <td colspan="6" class="tleft">{{ form.address }}</td>
        </tr>
        <tr>
          <td colspan="2" align="center">通讯地址（详细住址）</td>
          <td
            colspan="6"
            class="tleft"
          >{{ form.mailAddress }}</td>
        </tr>
        <tr>
          <td colspan="2" align="center">紧急联系人姓名及关系</td>
          <td colspan="2" class="tleft">{{ form.emergencyName+" /（关系）"+form.emergencyRelation }}</td>
          <td colspan="2" align="center">紧急联系人电话</td>
          <td colspan="2" class="tleft">{{ form.emergencyPhone }}</td>
        </tr>
        <tr>
          <td align="left" colspan="8" class="back1"  style="height: 10mm;">二、教育情况</td>
        </tr>
        <tr>
          <td
            colspan="1"
            rowspan="4"
            align="center"
          >教育经历</td>
          <td colspan="7" class="tleft">注：从最高学历倒序</td>
        </tr>
        <tr>
          <td colspan="2" align="center">起讫时间</td>
          <td colspan="2" align="center">学校时间</td>
          <td colspan="1" align="center">专业</td>
          <td colspan="1" align="center">学历</td>
          <td colspan="1" align="center">学历形式</td>
        </tr>
        <tr v-for="(item,index) in 2" :key="index">
          <td
            colspan="2"
            align="center"
            class="h_8"
          >{{JSON.parse(form.educationalExperience)[index]?JSON.parse(form.educationalExperience)[index].submitDateList[0].split("T")[0] + "-" + JSON.parse(form.educationalExperience)[0].submitDateList[1].split("T")[0] : "" }}</td>
          <td colspan="2" align="center">{{JSON.parse(form.educationalExperience)[index]?JSON.parse(form.educationalExperience)[index].school:""}}</td>
          <td colspan="1" align="center">{{JSON.parse(form.educationalExperience)[index]?JSON.parse(form.educationalExperience)[index].major:""}}</td>
          <td
            colspan="1"
            align="center"
          >{{JSON.parse(form.educationalExperience)[index]?JSON.parse(form.educationalExperience)[index].qualification:""}}</td>
          <td
            colspan="1"
            align="center"
          >{{JSON.parse(form.educationalExperience)[index]?JSON.parse(form.educationalExperience)[index].educationForm:""}}</td>
        </tr>
        <tr>
          <td align="left" colspan="8" class="back1"  style="height: 10mm;">三、工作经历</td>
        </tr>
        <tr>
          <td colspan="2" align="center">起讫时间</td>
          <td colspan="2" align="center">工作单位</td>
          <td colspan="1" align="center">所任职务</td>
          <td colspan="1" align="center">年度综合收入（税前）</td>
          <td colspan="1" align="center">证明人及职务</td>
          <td colspan="1" align="center">证明人电话</td>
        </tr>
        <tr v-for="(i,index) in 3" :key="index">
          <td
            colspan="2"
            align="center"
            class="h_8"
          >{{JSON.parse(form.workExperience)[index]?JSON.parse(form.workExperience)[index].submitDateList[0].split("T")[0] + "-" + JSON.parse(form.educationalExperience)[0].submitDateList[1].split("T")[0]:""}}</td>
          <td colspan="2" align="center">{{JSON.parse(form.workExperience)[index]?JSON.parse(form.workExperience)[index].unit:""}}</td>
          <td colspan="1" align="center">{{JSON.parse(form.workExperience)[index]?JSON.parse(form.workExperience)[index].position:""}}</td>
          <td colspan="1" align="center">{{JSON.parse(form.workExperience)[index]?JSON.parse(form.workExperience)[index].salary:""}}</td>
          <td colspan="1" align="center">{{JSON.parse(form.workExperience)[index]?JSON.parse(form.workExperience)[index].certifier:""}}</td>
          <td colspan="1" align="center">{{JSON.parse(form.workExperience)[index]?JSON.parse(form.workExperience)[index].phone:""}}</td>
        </tr>
        <tr>
          <td align="left" colspan="8" class="back1"  style="height: 10mm;">四、其他情况说明</td>
        </tr>
        <tr>
          <td colspan="5" align="left">是否有过犯罪记录？</td>
          <td
            colspan="3"
            class="tleft"
          >{{ form.isCrime == "是"?form.isCrime +" / （说明）"+ form.crimeExperience:form.isCrime }}</td>
        </tr>
        <tr>
          <td colspan="5" align="left">是否有过违规违纪记录？</td>
          <td
            colspan="3"
            class="tleft"
          >{{ form.isViolation == "是"?form.isViolation +" / （说明）"+ form.violationExperience:form.isViolation }}</td>
        </tr>
        <tr>
          <td colspan="5" align="left">曾否因大病入院或患有特殊疾病？</td>
          <td
            colspan="3"
            class="tleft"
          >{{ form.isHospital == "是"?form.isHospital +" / （说明）"+ form.hospitalExperience:form.isHospital }}</td>
        </tr>
        <tr>
          <td colspan="5" align="left">是否对其他公司负竞业限制义务？</td>
          <td
            colspan="3"
            class="tleft"
          >{{ form.isLimit == "是"?form.isLimit +" / （说明）"+ form.limitExperience:form.isLimit }}</td>
        </tr>
        <tr>
          <td colspan="5" align="left">是否曾在本集团及所属分子公司任职或建立过劳动关系？</td>
          <td
            colspan="3"
            class="tleft"
          >{{ form.isEntry == "是"?form.isEntry +" / （说明）"+ form.entryExperience:form.isEntry }}</td>
        </tr>
        <tr>
          <td colspan="5" align="left">其他补充说明</td>
          <td colspan="3" class="tleft">{{ form.otherExperience }}</td>
        </tr>
      </table>
      <div class="print_bottom">
        <span style="width: 60mm;">打印日期: {{ new Date().format('yyyy-MM-dd hh:mm') }}</span>
      </div>
      <div class="print_bottom">
        <span style="width: 60mm;">打印人: {{ $store.state.user.nickName }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import printJS from "print-js";
export default {
  props: {
    formType: {
      type: String,
      default: "采购申请"
    },
    form: {
      type: Object,
      default: {}
    }
    // actBusinessStatus: {
    //   type: Object,
    //   default: {}
    // },
    // printObject: {
    //   type: Array,
    //   default: []
    // },
    // history: {
    //   type: Array,
    //   default: []
    // }
  },
  data() {
    return {
      printView: false
    };
  },
  methods: {
    async open() {
      this.printView = true;
    },
    handlePrint() {
      let userAgent = navigator.userAgent;
      //判断是否Firefox浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        console.log("Firefox");
        printJS({
          printable: "print_page", // 标签元素id
          type: "html",
          header: "",
          style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
              padding-left: 10px;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }
            @media print{@page {size:portrait}}
            `
        });
      }
      //判断是否chorme浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        console.log("Chrome");
        printJS({
          printable: "print_page", // 标签元素id
          type: "html",
          header: "",
          documentTitle: "",
          style: `@page {size:auto;margin-top:40px; margin-left:15px; margin-right: 30px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            td {
              border: 1px solid #000;
              font-size:11pt !important;
              padding: 1mm 0 1mm 2mm !important;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }
            .print_page {
              width: 180mm;
              margin: 0 auto;
              padding-left:10px;
              text-align: center;
            }
            .back1 {
              -webkit-print-color-adjust: exact;
              background-color:#244061 !important;
              color: #fff !important;
              font-size: 14pt !important;
            }
            .print_table {
              width: 100%;
              margin-bottom: 4px;
            }
            .tleft {
              text-align: left;
              padding-left: 10px;
            }
            .h_8{
              height: 8mm !important;
            }
            .print_title1 {
              width: 100%;
              display: flex;
              justify-content: center;
              margin-top: 20px !important;
              margin-bottom: 10px !important;
              font-size: 16pt !important;
              font-weight: 600;

            }
            .w12{
              width: 12.5%;
            }
            .print_title2 {
              width: 100%;
              padding: 4px;
              display: flex;
              justify-content: space-between;
            }
            .print_bottom{
              width: 100%;
              padding-top:4px;
              display: flex;
              justify-content: flex-end;
            }
            @media print{@page {size:portrait}}
            `
        });
      }
      //判断是否IE浏览器
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        console.log("IE");
        printJS({
          printable: "print_page", // 标签元素id
          type: "html",
          header: "",
          style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
              font-size:12pt !important;
              padding-left: 10px;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }
            @media print{@page {size:portrait}}
            `
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px 20px 20px !important;
}
.btn_print {
  width: 210mm;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.print_page {
  width: 208mm;
  margin: 0 auto;
  height: 293mm;
  text-align: center;
  border: 1px solid #bbb;
  border-bottom: 0;
}
.print_table {
  width: 100%;
  margin-bottom: 4px;
}
.print_table tr td {
  font-size:12pt !important;
  padding: 1mm 0 1mm 2mm !important;
}
.w25 {
  width: 25%;
}
.w12 {
  width: 12.5%;
}
.tcenter {
  text-align: center;
}
.tleft {
  text-align: left;
  padding-left: 10px;
}
.w50 {
  width: 50%;
}
.print_title1 {
  width: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 14pt !important;
  font-weight: 600;
}
.print_title2 {
  width: 100%;
  padding: 4px;
  display: flex;
  justify-content: space-between;
}
.print_bottom {
  width: 100%;
  padding-top: 4px;
  display: flex;
  justify-content: flex-end;
}
.back1 {
  -webkit-print-color-adjust: exact;
  background-color: #244061 !important;
  color: #fff !important;
  font-size: 14pt !important;
}
.h_8{
  height: 8mm !important;
}
</style>
